<template>
  <div class="personal-page download">
    <div class="pp-title">{{name}}</div>
    <div class="pp-content">
      <div>
        <el-select
          v-model="catid"
          placeholder="我的课程"
          @change="handleChange"
        >
          <el-option
            v-for="item in category"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="xyd-el-table2">
        <el-table
          ref="multipleTable"
          :data="data"
          :border="false"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading.body="loading"
          >
          <el-table-column
            prop="down_time"
            label="下载时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="title"
            label="课程名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="category"
            label="资源类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="语点"
            width="120">
            <template scope="scope">
              <span>{{scope.row.yd_price}}</span>
              <span>{{scope.row.yd_type}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="操作"
            show-overflow-tooltip>
            <template scope="scope">
              <span class="option">
                <input class="url" type="text" :id="'download_url_' + scope.row.id" :value="appOrigin + '#/resource/download/' + scope.row.id"/>
                <a href="javascript:;" title="收藏" @click="handleCollect(scope.row)">
                  <i :class="scope.row.collected ? 'xyd-collection_a animated bounce' : 'xyd-collection2'"></i>
                </a>
                <a href="javascript:;" title="下载" @click="handleDownload(scope.row)">
                  <i class="xyd-download2" ></i>
                </a>
                <a href="javascript:;" title="预览" @click="handlePreview(scope.row)">
                  <i class="xyd-preview2" ></i>
                </a>
                <a href="javascript:;" title="分享" @click="handleShare(scope.row)">
                  <i class="xyd-share2" ></i>
                </a>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          :page-size="offset"
          layout="prev, pager, next"
          :total="total"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getDownload } from 'api/user'

export default {
  name: 'Listen',
  components: {
    NavBar
  },
  data() {
    return {
      appOrigin: process.env.APP_ORIGIN,
      name: this.$route.name,
      loading: false,
      category: [],
      catid: '',
      data: [],
      offset: 10,
      page: 1,
      total: 0
    }
  },
  created() {
    this.$store.dispatch('GetTops')
    .then(res => {
      this.category = res
    })
    .catch(err => console.log(err))
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      getDownload({
        catid: this.catid,
        offset: this.offset,
        page: this.page
      })
      .then(res => {
        this.loading = false
        this.data = res.data.resource
        this.total = res.data.page.last_page * this.offset
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleCollect(item) {
      const { id, category, title, price, yd_type } = item
      if (!this.$store.state.user.uid) {
        this.$message({
          message: '需要登录',
          type: 'warning'
        })
        return false
      }
      item.collected = true
      collect({
        rsid: id,
        cat: category,
        rsname: title,
        price: price + yd_type
      })
      .then(res => console.log(res))
      .catch(err => {
        item.collected = false
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    },
    handleDownload(item) {
      this.$router.push('/resource/download/' + item.id)
    },
    handlePreview(item) {
      this.$router.push('/resource/preview/' + item.id + (this.isListen ? '?type=listen' : ''))
    },
    handleShare(item) {
      const did = document.getElementById('download_url_' + item.id)
      did.select()
      document.execCommand('copy', true)
      this.$message({
        message: '资源链接已成功复制到剪贴板，快去分享吧~',
        type: 'success'
      })
    },
    // 筛选
    handleChange() {
      this.page = 1
      this.fetchData()
    },
    // 分页
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.personal-page.download{
  .pp-title{}
  .pp-content{
    padding: 20px 40px;
    .xyd-el-table2{
      .option{
        >a{
          padding: 0 10px;
        }
      }
    }
  }
}
</style>